<template >
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="navbar">
            <h3>今日练车名单</h3>
        </div>
    </div>
    <div class="button_box">
      <van-button icon="todo-list-o" @click="MyPractice" >往日安排</van-button> <van-button icon="plus" @click="addPractice" >我要安排</van-button>
    </div>
    <div class="subjectOne">
      
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">8:00~10:00</van-tag></div>
          <div class="info" v-if="Eight && Eight.length > 0">
            <div v-for="(item,index) in Eight" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">10:00~12:00</van-tag></div>
          <div class="info" v-if="ten && ten.length > 0">
            <div v-for="(item,index) in ten" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">12:00~14:00</van-tag></div>
          <div class="info" v-if="twelve && twelve.length > 0">
            <div v-for="(item,index) in twelve" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">14:00~16:00</van-tag></div>
          <div class="info" v-if="fourteen && fourteen.length > 0">
            <div v-for="(item,index) in fourteen" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">16:00~18s:00</van-tag></div>
          <div class="info" v-if="sixteen && sixteen.length > 0">
            <div v-for="(item,index) in sixteen" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
      <van-form >
        <van-field
          readonly
          clickable
          label="科目"
          :value="catogary"
          placeholder="选择科目"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="coachAddPractice" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import chauffeur from "../js/chauffeur";
export default {
  data() {
    return{
      showPicker:false,
      catogary:"",
      createTime:"",
      show:false,
      active:0,
      telephone:"",
      columns:['科二','科三'],
      Eight: [],
      ten: [],
      twelve: [],
      fourteen: [],
      sixteen: [],
      traineeList:[]
    }
  },
  created(){
  },
  mounted(){
    this.getAllTrainee()
    this.getNowPractice()
  },
  methods:{
    onConfirm(value){
      this.catogary = value;
      this.showPicker = false;
    },
    getNowFormatDateTime3:(date)=>{//获取后一天日期
        let time = ''
        if(date){
            time=new Date(date).getTime()+24*60*60*1000;
        }else{
            time=new Date().getTime()+24*60*60*1000;
        }
        let afterday=new Date(time);
        return afterday=afterday.getFullYear() + "-" + (afterday.getMonth()> 9 ? (afterday.getMonth() + 1) :  + (afterday.getMonth() + 1)) + "-" +(afterday.getDate()> 9 ? (afterday.getDate()) : "0" + (afterday.getDate()));
    },
    // 教练员查看自己训练记录
    MyPractice(){
      this.$router.push({path:'/manager/Reservation'})
    },
    // 教练员创建明天的练车表
    addPractice(){
      this.catogary = ""
      this.show = true
    },
    // 创建新训练表
    coachAddPractice(){
      let nowDate = new Date()
      let newDate = this.getNowFormatDateTime3(nowDate)
      let requestBody = {
        Eight: " ",
        ten: " ",
        twelve: " ",
        fourteen: " ",
        sixteen: " ",
        catogary: this.catogary,
        create_time: newDate
      }
      chauffeur.createPractice(requestBody).then(res => {
        if(res.data.code === 0 && res.data.data === '今日已安排练车'){
          Toast.success(res.data.data);
        }else{
          Toast.fail(res.data.data);
          this.show = false
          this.showPicker = false;
          this.catogary = ""
        }
      })
    },
    // 获取全部学员信息
    getAllTrainee(){
      chauffeur.getAllTrainee().then(res => {
        if (res.data.code === 0) {
          this.traineeList = res.data.data.list
        }
      })
    },
    // 教练员获取当日练车表
    getNowPractice(){
      let nowDate = new Date().toLocaleDateString().replaceAll('/','-')
      let requestBody = {
        create_time :nowDate
      }
      chauffeur.getTheDay(requestBody).then(res => {
        if(res.data.code === 0){
          let Eight = res.data.data.Eight.split(',')
          Eight.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.Eight.push(item)
              }
            })
          })
          let ten = res.data.data.ten.split(',')
          ten.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.ten.push(item)
              }
            })
          })
          let twelve = res.data.data.twelve.split(',')
          twelve.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.twelve.push(item)
              }
            })
          })
          let fourteen= res.data.data.fourteen.split(',')
          fourteen.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.fourteen.push(item)
              }
            })
          })
          let sixteen = res.data.data.sixteen.split(',')
          sixteen.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.sixteen.push(item)
              }
            })
          })
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
  .container{
    .van-popup{
      .van-form{
        margin-top: 15%;
        position: relative;
      }
    }
    .header{
      .navbar {
        background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
        height: 50px;
        text-align: center;
        color: #fff;
        h3 {
          color: #fff;
          margin-top: 0;
          line-height: 50px;
        }
      }
    }
    .button_box{
        text-align: right;
        margin-right: 2%;
        .van-button{
          margin-top: 2%;
          background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
          color: white;
        }
      }
    .subjectOne{
      position: relative;
      height: 80vh;
      width: 90%;
      margin-left: 5%;
      border-radius: 10px;
      margin-top: 2%;
      background-color: white;
      overflow-y: auto;
      .Eight{
        margin-top: 8%;
        .van-tag{
          width: 100px;
          height: 30px;
          font-size: 1rem;
          text-align: center;
        }
        .info{
          margin-top: 2%;
        }
      }
    }
  }
</style>